<template>
    <div>
        <van-dropdown-menu>
            <van-dropdown-item v-model="categoryVal" title="综合"  disabled ></van-dropdown-item>
            <van-dropdown-item v-model="categoryVal" @change="priceChange" title="价格" :options="priceArr" ></van-dropdown-item>
            <van-dropdown-item v-model="categoryVal" @change="categoryChange" title="分类" :options="filterCategory" ></van-dropdown-item>
        </van-dropdown-menu>
        <van-empty v-if="goodsList.length==0" image="search" description="您搜索的产品不存在" />
        <Product v-else :goodsList="goodsList"/>
    </div>
</template>

<script>
    import Product from './Product.vue'
    export default {
        name: "MyProduct",
        data(){
            return {
                priceVal: 0,
                // 分类下拉菜单当前项
                categoryVal: 0,
                // 价格下拉菜单的当前项
                priceArr: [
                    { text: '价格由高到低', value: 'desc' },
                    { text: '价格由低到高', value: 'asc' }
                ],
            }
        },
        props:['filterCategory', 'goodsList'],
        created(){

        },
        methods:{
            // 分类下拉菜单点击事件
            categoryChange(val){
                this.$emit('categoryChange',val)
            },
            // 价格下拉菜单点击事件
            priceChange(val){
                this.$emit('priceChange',val)
            }

        },
        components:{
            Product
        },
        mounted(){
            this.filterCategory.map((val,index)=>{
                if (val.checked){
                    this.categoryVal = val.value
                }
            })
        }
    }
</script>

<style scoped>

</style>